<template>
  <div class="tab_content">
    <!-- 标题栏 -->
    <div class="common_page_tt flex_ac">
      <a href="javascript:;" @click="$router.go(-1)">
        <img src="@/assets/pinggu/back.png" alt="">
      </a>
      <span class="margin_l10">{{ title }}</span>
    </div>

    <!-- 左右分栏容器 -->
    <div class="content_wrapper">
      <!-- 左侧列表区 -->
      <div class="left_list_area">
        <!-- 内容区 -->
        <div class="content_area">
          <!-- 导航栏 -->
          <div class="failed_nav_bar">
            <a href="javascript:;" v-if="failedQueryParams.page > 1" class="nav_arrow nav_arrow_prev"
              @click="handlePrevPage">
              <img src="@/assets/previous_page.png" alt="上一页" />
            </a>
            <span v-else class="nav_arrow nav_arrow_prev nav_arrow_disabled">
              <img src="@/assets/previous_page.png" alt="上一页" />
            </span>
            <span class="nav_position"><span class="nav_position_index">第{{ failedQueryParams.page }}</span>/{{
              totalPages }}页</span>
            <a href="javascript:;" v-if="failedQueryParams.page < totalPages" class="nav_arrow nav_arrow_next"
              @click="handleNextPage">
              <img src="@/assets/next_page.png" alt="下一页" />
            </a>
            <span v-else class="nav_arrow nav_arrow_next nav_arrow_disabled">
              <img src="@/assets/next_page.png" alt="下一页" />
            </span>
          </div>

          <!-- 项目列表 -->
          <div class="failed_project_list" v-loading="failedLoading">
            <div v-for="(item, index) in failedList" :key="item.id || index" class="failed_project_card"
              :class="{ active: selectedProject && selectedProject.id === item.id }" @click="handleSelectProject(item)">
              <!-- 上部分：左侧和右侧内容区 -->
              <div class="card_top_content">
                <!-- 左侧内容区 -->
                <div class="card_left_content">
                  <!-- 项目标题 -->
                  <div class="project_title">{{ item.col_title || '-' }}</div>
                  <!-- 分类标签 -->
                  <div class="project_category">
                    <span class="category_tag">{{ item.category_txt || '' }}</span>
                  </div>
                </div>

                <!-- 右侧内容区 -->
                <div class="card_right_content">
                  <!-- 状态 -->
                  <div class="project_status" :style="{ color: item.status_text_color }">{{ item.status_text || '-' }}
                  </div>
                </div>
              </div>

              <!-- 底部信息（提交时间和总分） -->
              <div class="project_bottom_info">
                <span class="project_submit_time">提交时间{{ item.update_time || '-' }}</span>
                <span class="project_total_score">总分: {{ item.all_score || 0 }}</span>
              </div>
            </div>

            <!-- 空数据提示 -->
            <div v-if="!failedLoading && failedList.length === 0" class="no_data">
              <img src="@/assets/nodata.png" alt="暂无数据" />
              <p class="dark">暂无审核失败项目</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧详情区 -->
      <div class="right_detail_area">
        <!-- 标题栏 -->
        <div class="detail_header" v-if="selectedProject && !detailLoading">
          <el-tooltip :content="selectedProject.title || '-'" placement="top" :disabled="!isTitleOverflow">
            <div class="detail_title" ref="titleElement">{{ selectedProject.title || '-' }}</div>
          </el-tooltip>
          <span class="category_tag" v-if="selectedProject.category_txt">{{ selectedProject.category_txt }}</span>
          <span class="status_tag" v-if="selectedProject.status_text">{{ selectedProject.status_text }}</span>
          <span class="operation_log" @click="handleShowOperationLog">操作日志</span>
        </div>
        <!-- 骨架屏 -->
        <div class="detail_container skeleton_container" v-if="detailLoading">
          <div class="skeleton_header">
            <div class="skeleton_line skeleton_title"></div>
            <div class="skeleton_tag"></div>
            <div class="skeleton_tag"></div>
            <div class="skeleton_button"></div>
          </div>
          <div class="skeleton_section">
            <div class="skeleton_line skeleton_section_title"></div>
            <div class="skeleton_card">
              <div class="skeleton_line skeleton_score"></div>
              <div class="skeleton_info_group">
                <div class="skeleton_info_item">
                  <div class="skeleton_line skeleton_label"></div>
                  <div class="skeleton_line skeleton_value"></div>
                </div>
                <div class="skeleton_info_item">
                  <div class="skeleton_line skeleton_label"></div>
                  <div class="skeleton_line skeleton_value"></div>
                </div>
                <div class="skeleton_info_item">
                  <div class="skeleton_line skeleton_label"></div>
                  <div class="skeleton_line skeleton_value"></div>
                </div>
                <div class="skeleton_info_item">
                  <div class="skeleton_line skeleton_label"></div>
                  <div class="skeleton_line skeleton_value"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="skeleton_section">
            <div class="skeleton_line skeleton_section_title"></div>
            <div class="skeleton_card">
              <div class="skeleton_tabs">
                <div class="skeleton_tab"></div>
                <div class="skeleton_tab"></div>
                <div class="skeleton_tab"></div>
              </div>
              <div class="skeleton_indicator_list">
                <div class="skeleton_indicator_item" v-for="n in 3" :key="n">
                  <div class="skeleton_line skeleton_indicator_title"></div>
                  <div class="skeleton_line skeleton_indicator_content"></div>
                  <div class="skeleton_line skeleton_indicator_content"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="skeleton_actions">
            <div class="skeleton_button skeleton_action_btn"></div>
            <div class="skeleton_button skeleton_action_btn"></div>
          </div>
        </div>
        <!-- 实际内容 -->
        <div class="detail_container" v-if="selectedProject && !detailLoading">
          <!-- 基础信息标题 -->
          <div class="section_title first_section_title">基础信息</div>

          <!-- 基础信息卡片 -->
          <div class="basic_info_card">
            <!-- 总得分和评分行 -->
            <div class="score_info_row">
              <div class="score_info_item">
                <span class="info_label">总得分</span>
                <div class="score_display_group">
                  <span class="total_score_text">{{ selectedProject.all_score || 0 }}分</span>
                  <div class="star_rating">
                    <span v-for="n in 5" :key="n" class="star"
                      :class="{ filled: n <= (selectedProject.xx_num || 0) }">★</span>
                  </div>
                  <div class="info_links">
                    <a href="javascript:;" class="link_text" @click="handleScoreExplanation">评委打分</a>
                    <a href="javascript:;" class="link_text" @click="handleDeductionExplanation">扣分项说明</a>
                  </div>
                </div>
              </div>
            </div>

            <!-- 组织信息：垂直排列 -->
            <div class="org_info_list">
              <div class="org_info_item">
                <span class="info_label">主办单位</span>
                <span class="info_value">{{ selectedProject.zb_company || '-' }}</span>
              </div>
              <div class="org_info_item">
                <span class="info_label">承办单位</span>
                <div class="info_value">
                  <div v-if="selectedProject.cb_company && selectedProject.cb_company.length > 0">
                    <div v-for="(company, index) in selectedProject.cb_company" :key="index" class="company_item">
                      {{ company }}
                    </div>
                  </div>
                  <span v-else>-</span>
                </div>
              </div>
              <div class="org_info_item">
                <span class="info_label">提交单位</span>
                <span class="info_value">{{ selectedProject.submit_company || '-' }}</span>
              </div>
              <div class="org_info_item">
                <span class="info_label">提交时间</span>
                <span class="info_value">{{ selectedProject.update_time || '-' }}</span>
              </div>
            </div>
          </div>

          <!-- 申请材料标题 -->
          <div class="section_title">申请材料</div>

          <!-- 申请材料卡片 -->
          <div class="application_materials_card">
            <!-- 选项卡 -->
            <!-- <div class="custom_tabs_header">
              <span class="custom_tab_item" :class="{ active: activeMaterialTab === 'standard' }"
                @click="activeMaterialTab = 'standard'">达标类指标</span>
              <span class="tab_separator">|</span>
              <span class="custom_tab_item" :class="{ active: activeMaterialTab === 'benefit' }"
                @click="activeMaterialTab = 'benefit'">效益类指标</span>
              <span class="tab_separator">|</span>
              <span class="custom_tab_item" :class="{ active: activeMaterialTab === 'innovation' }"
                @click="activeMaterialTab = 'innovation'">创新类指标</span>
            </div> -->
            <!-- 指标内容 -->
            <div class="indicators_content pad_lr10">
              <answerform ref="answerform" />
            </div>
          </div>
        </div>

        <!-- 未选中提示 -->
        <div class="no_selected_tip" v-else>
          <p class="tip_text">请从左侧列表选择一个项目查看详情</p>
        </div>

        <!-- 固定在底部的审核按钮区域 -->
        <div class="fixed_audit_footer" v-if="selectedProject && selectedProject.status === 2 && !detailLoading">
          <div class="audit_actions">
            <el-button type="primary" size="medium" class="audit_btn" @click="handleAudit('approve')">
              审核通过
            </el-button>
            <el-button type="danger" size="medium" class="audit_btn" @click="handleAudit('reject')">
              审核不通过
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作日志 Dialog -->
    <el-dialog title="采集信息日志" :visible.sync="operationLogVisible" width="900px"
      :close-on-click-modal="false" append-to-body class="operation_log_dialog">
      <div class="operation_log_content">
        <el-table :data="operationLogList" height="500" border stripe style="width: 100%"
          :header-cell-style="{ background: '#F5F7FA', color: '#1F2329', fontWeight: 'bold' }">
          <el-table-column prop="title" label="操作步骤" width="150" align="center"></el-table-column>
          <el-table-column prop="company" label="人员/单位" width="200" align="center"></el-table-column>
          <el-table-column prop="desc" label="说明" align="left" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="add_time" label="时间" width="180" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 评委打分 Dialog -->
    <el-dialog title="评委打分" :visible.sync="scoreExplanationVisible" width="800px" :close-on-click-modal="false"
      append-to-body class="score_explanation_dialog">
      <div class="score_explanation_content">
        <!-- 评分公式说明 -->
        <div class="score_formula_box" v-if="scoreDesc && scoreDesc.length > 0">
          <div class="formula_text">
            <p>{{ scoreDesc[0] || '-' }}</p>
            <p>{{ scoreDesc[1] || '-' }}</p>
          </div>
        </div>

        <!-- 得分信息区 -->
        <div class="score_info_section">
          <div class="score_info_left">
            <div class="score_item">
              <span class="score_label">总得分</span>
              <span class="score_value">{{ scoreData.all_score || 0 }}分</span>
            </div>
            <div class="score_item">
              <span class="score_label">评分</span>
              <div class="star_rating_section">
                <div class="star_rating">
                  <span v-for="n in 5" :key="n" class="star" :class="{ filled: n <= (scoreData.xx || 0) }">★</span>
                </div>
              </div>
            </div>
            <div class="score_item">
              <span class="score_label">基础得分</span>
              <span class="score_value">{{ scoreData.base_score || 0 }}分</span>
            </div>
            <div class="score_item">
              <span class="score_label">评委平均分</span>
              <span class="score_value">{{ scoreData.pw_score || 0 }}分</span>
            </div>
          </div>
          <div class="score_info_right">
            <a href="javascript:;" class="deduction_link" @click="handleDeductionExplanation">扣分项说明</a>
          </div>
        </div>

        <!-- 评委得分表格 -->
        <div class="judge_scores_table">
          <el-table :data="judgeScoresTableData" border style="width: 100%" :row-style="getRowStyle">
            <el-table-column prop="index" label="序号" width="80" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.isTotal">总分</span>
                <span v-else>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nickname" label="评委" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.isTotal"></span>
                <span v-else>{{ scope.row.nickname || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="得分" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.isTotal"></span>
                <span v-else>{{ scope.row.score || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="评委打分">
              <template slot-scope="scope">
                <div v-if="scope.row.isTotal" class="total_score_in_table">{{ scoreData.pw_score || 0 }}分</div>
                <div v-else>
                  <div v-for="(dfItem, dfIndex) in (scope.row.df_list || [])" :key="dfIndex">
                    {{ dfItem.title }}（{{ dfItem.score }}）
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 扣分项说明 Dialog -->
    <el-dialog :title="deductionTitle || '扣分说明'" :visible.sync="deductionExplanationVisible" width="900px"
      :close-on-click-modal="false" append-to-body class="deduction_explanation_dialog">
      <div class="deduction_explanation_content">
        <!-- 自定义表格 -->
        <table class="deduction_custom_table" cellspacing="0" cellpadding="0" border="1">
          <!-- 表头 -->
          <thead>
            <tr>
              <th style="width: 10%;" colspan="1">
                序号
              </th>
              <th v-for="(col, colIndex) in deductionColumn" :key="colIndex" :style="{ width: col.width || 'auto' }"
                :colspan="col.col || 1">
                {{ col.title }}
              </th>
            </tr>
          </thead>
          <!-- 表体 -->
          <tbody>
            <tr v-for="(row, rowIndex) in deductionList" :key="rowIndex"
              :style="{ backgroundColor: row.row_style && row.row_style.bg ? row.row_style.bg : 'transparent' }">
              <td style="width: 5%;" colspan="1">
                {{ rowIndex + 1 }}
              </td>
              <td v-for="(col, colIndex) in deductionColumn" :key="colIndex" :style="{ width: col.width || 'auto' }"
                :colspan="col.col || 1">
                {{ row.value[col.prop] }}
              </td>
            </tr>
            <tr>
              <td colspan="1" style="font-weight: bold; background: #f5f7fa;">扣分汇总</td>
              <td v-for="(col, colIndex) in deductionColumn" :key="'total-' + colIndex"
                :style="{ width: col.width || 'auto', fontWeight: 'bold', background: '#f5f7fa' }"
                :colspan="col.col || 1">
                {{(() => {
                  // 如果 col.sum 为 false 或不存在，显示空
                  if (!col.sum) {
                    return '';
                  }
                  // 如果 col.sum 为 true，计算总和
                  let total = 0;
                  deductionList.forEach(row => {
                    const val = row.value && row.value[col.prop];
                    if (!isNaN(parseFloat(val))) {
                      total += parseFloat(val);
                    }
                  });
                  // 判断如果是数字则显示，否则用 '-' 占位
                  return isNaN(total) || !deductionList.length ? '-' : total;
                })()}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入采集管理API
import collectionApi from "@/api/collection";
import answerform from "../answer/answer_form.vue";
export default {
  name: 'ProjectDetail',
  components: {answerform},
  data() {
    return {
      projectId: '', // 项目ID，从路由获取
      failedLoading: false,
      detailLoading: false, // 右侧详情加载状态
      failedList: [],
      failedListTotal: 0,
      failedQueryParams: {
        page: 1,
        limit: 16
      },
      currentIndex: 0,
      selectedProject: null, // 当前选中的项目
      activeMaterialTab: 'standard', // 当前激活的材料选项卡
      operationLogVisible: false, // 操作日志对话框显示状态
      scoreExplanationVisible: false, // 评委打分对话框显示状态
      deductionExplanationVisible: false, // 扣分项说明对话框显示状态
      deductionList: [], // 扣分项列表，从接口获取
      deductionColumn: [], // 扣分项表格列配置，从接口获取
      deductionTitle: '', // 扣分说明弹窗标题
      scoreData: {
        all_score: 0,
        xx: 0,
        base_score: 0,
        pw_score: 0
      },
      scoreDesc: [], // 评委打分，从接口获取
      judgeScoresList: [], // 评委得分列表，从接口获取
      operationLogList: [], // 操作日志数据，从接口获取
      // operationLogTitle: '', // 操作日志标题，从接口获取
      isTitleOverflow: false, // 标题是否溢出
      isIndicatorTitleOverflow: {} // 指标标题是否溢出，key为指标id或index
    }
  },
  computed: {
    // 评委得分表格数据（包含统计行）
    judgeScoresTableData() {
      const list = [...this.judgeScoresList];
      // 添加统计行
      if (this.scoreData.pw_score !== undefined && this.scoreData.pw_score !== null) {
        list.push({
          isTotal: true,
          nickname: '平均分',
          score: (this.scoreData.pw_score || 0).toFixed(2),
          df_list: []
        });
      }
      return list;
    },
    // 达标类指标（category_id = 1）
    standardAnswers() {
      if (!this.selectedProject || !this.selectedProject.sample_answer) {
        return [];
      }
      return this.selectedProject.sample_answer;
    },
    // 计算总页数
    totalPages() {
      if (this.failedListTotal === 0 || this.failedQueryParams.limit === 0) {
        return 1;
      }
      return Math.ceil(this.failedListTotal / this.failedQueryParams.limit);
    },
    title() {
      return this.$route.query.title || '';
    }
  },
  methods: {
    // 获取审核失败项目列表
    getFailedList() {
      const _this = this;
      if (!this.projectId) {
        // 如果没有项目ID，清空列表
        this.failedList = [];
        this.failedListTotal = 0;
        this.selectedProject = null;
        this.updateCurrentIndex();
        return;
      }

      this.failedLoading = true;
      const params = {
        ...this.failedQueryParams,
        template_id: this.projectId,
        status: 'failed' // 筛选审核失败的项目
      };

      // 使用collection.js接口获取审核失败项目列表
      collectionApi.leftList(params).then(function (res) {
        if (res && res.message) {
          _this.failedList = res.message.data || [];
          _this.failedListTotal = res.message.total || 0;
          _this.updateCurrentIndex();
          // 默认选中第一项（翻页时总是选中第一项）
          if (_this.failedList.length > 0) {
            _this.handleSelectProject(_this.failedList[0]);
          } else {
            _this.selectedProject = null;
          }
        } else {
          _this.failedList = [];
          _this.failedListTotal = 0;
          _this.selectedProject = null;
          _this.updateCurrentIndex();
        }
        _this.failedLoading = false;
      }).catch(function (error) {
        console.error('获取审核失败项目列表失败:', error);
        _this.$message.error('获取审核失败项目列表失败');
        _this.failedList = [];
        _this.failedListTotal = 0;
        _this.selectedProject = null;
        _this.updateCurrentIndex();
        _this.failedLoading = false;
      });
    },

    // 更新当前索引
    updateCurrentIndex() {
      if (this.failedList.length > 0) {
        // 计算当前页第一个项目的全局索引
        this.currentIndex = (this.failedQueryParams.page - 1) * this.failedQueryParams.limit + 1;
      } else {
        this.currentIndex = 0;
      }
    },

    // 上一页
    handlePrevPage() {
      if (this.failedQueryParams.page > 1) {
        this.failedQueryParams.page--;
        this.getFailedList();
      }
    },

    // 下一页
    handleNextPage() {
      if (this.failedQueryParams.page < this.totalPages) {
        this.failedQueryParams.page++;
        this.getFailedList();
      }
    },

    // 上一项（保留，可能其他地方还在使用）
    handlePrev() {
      if (this.currentIndex > 1) {
        // 如果当前是当前页的第一项，则跳转到上一页
        const currentPageFirstIndex = (this.failedQueryParams.page - 1) * this.failedQueryParams.limit + 1;
        if (this.currentIndex <= currentPageFirstIndex && this.failedQueryParams.page > 1) {
          this.failedQueryParams.page--;
          this.getFailedList();
        } else {
          this.currentIndex--;
        }
        // 选中对应索引的项目
        this.selectProjectByIndex();
      }
    },

    // 下一项（保留，可能其他地方还在使用）
    handleNext() {
      if (this.currentIndex < this.failedListTotal) {
        this.currentIndex++;
        // 如果超出当前页范围，跳转到下一页
        const currentPageLastIndex = this.failedQueryParams.page * this.failedQueryParams.limit;
        if (this.currentIndex > currentPageLastIndex && this.failedQueryParams.page * this.failedQueryParams.limit < this.failedListTotal) {
          this.failedQueryParams.page++;
          this.getFailedList();
        }
        // 选中对应索引的项目
        this.selectProjectByIndex();
      }
    },

    // 选择项目
    handleSelectProject(item) {
      const _this = this;
      if (!item || !item.id) {
        this.selectedProject = null;
        // 清空相关数据
        this.deductionList = [];
        this.judgeScoresList = [];
        this.scoreDesc = [];
        this.detailLoading = false;
        return;
      }

      // 显示loading
      this.detailLoading = true;

      // 调用详情接口获取完整项目信息
      collectionApi.detail({ id: item.id, project_id: this.projectId }).then((res) => {
        if (res && res.message) {
          const detailData = res.message;

          // 从 base_info 中获取基础信息，使用 base_info.id 作为匹配的ID
          const baseInfo = detailData.base_info || {};
          const baseInfoId = baseInfo.id || item.id;

          // 使用 base_info 的数据更新 selectedProject
          _this.selectedProject = {
            ...baseInfo,
            id: baseInfoId, // 使用 base_info.id 作为ID
            sample_answer: detailData.sample_answer || []
          };


          _this.$nextTick(()=>{
            _this.$refs.answerform.init({list:detailData.sample_answer || [],type:3})
          })



          // 从接口返回的数据中提取相关数据
          // 扣分项列表现在从专门的扣分说明接口获取，不再从详情接口获取
        } else {
          // 如果接口失败，使用传入的item数据
          _this.selectedProject = { ...item };
        }
        _this.detailLoading = false;
        // 检查标题是否溢出
        _this.$nextTick(() => {
          _this.checkTitleOverflow();
        });
      }).catch((error) => {
        console.error('获取项目详情失败:', error);
        // 如果接口失败，使用传入的item数据
        _this.selectedProject = { ...item };
        _this.detailLoading = false;
        // 检查标题是否溢出
        _this.$nextTick(() => {
          _this.checkTitleOverflow();
        });
      });
    },

    // 检查标题是否溢出
    checkTitleOverflow() {
      this.$nextTick(() => {
        if (this.$refs.titleElement) {
          const element = this.$refs.titleElement;
          // 比较元素的滚动宽度和客户端宽度，如果滚动宽度大于客户端宽度，说明文本溢出
          this.isTitleOverflow = element.scrollWidth > element.clientWidth;
        } else {
          this.isTitleOverflow = false;
        }
        // 检查指标标题是否溢出
        this.checkIndicatorTitleOverflow();
      });
    },

    // 检查指标标题是否溢出
    checkIndicatorTitleOverflow() {
      this.$nextTick(() => {
        if (!this.selectedProject || !this.selectedProject.sample_answer || !this.selectedProject.sample_answer[0]) {
          this.isIndicatorTitleOverflow = {};
          return;
        }
        const overflowMap = {};
        this.selectedProject.sample_answer.forEach((item, index) => {
          const refKey = `indicatorTitle_${item.id || index}`;
          const refs = this.$refs[refKey];
          // refs 可能是数组（如果多个元素有相同的ref）或单个元素
          const element = Array.isArray(refs) ? refs[0] : refs;
          if (element) {
            overflowMap[item.id || index] = element.scrollWidth > element.clientWidth;
          } else {
            overflowMap[item.id || index] = false;
          }
        });
        this.isIndicatorTitleOverflow = overflowMap;
      });
    },

    // 根据索引选择项目
    selectProjectByIndex() {
      if (this.failedList.length > 0) {
        const indexInPage = (this.currentIndex - 1) % this.failedQueryParams.limit;
        if (indexInPage >= 0 && indexInPage < this.failedList.length) {
          this.selectedProject = { ...this.failedList[indexInPage] };
        }
      }
    },

    // ��评委打分
    handleScoreExplanation() {
      const _this = this;
      if (!this.selectedProject || !this.selectedProject.id) {
        this.$message.warning('请先选择项目');
        return;
      }

      // ��评委打分弹框
      this.scoreExplanationVisible = true;

      // 调用接口获取评委得分数据
      collectionApi.projectJudge({
        id: this.selectedProject.id,
        project_id: this.projectId
      }).then((res) => {
        if (res && res.message) {
          const data = res.message;

          if (data.list) {
            // 处理评委得分列表
            if (data.list.pw_list) {
              _this.judgeScoresList = data.list.pw_list;
            }
            // 计算基础得分和评委平均分
            if (data.list.score_data) {
              _this.scoreData = data.list.score_data;
            }
          }

          _this.scoreDesc = res.message.desc || [];
        } else {
          // 如果接口返回为空，使用默认值
          _this.scoreData = {
            all_score: 0,
            xx: 0,
            base_score: 0,
            pw_score: 0
          };
          _this.judgeScoresList = [];
          _this.scoreDesc = [];
        }
      }).catch((error) => {
        console.error('��评委打分失败:', error);
        _this.$message.error('��评委打分失败，请稍后重试');
        _this.scoreData = {
          all_score: 0,
          xx: 0,
          base_score: 0,
          pw_score: 0
        };
        _this.judgeScoresList = [];
        _this.scoreDesc = [];
      });
    },

    // 获取表格行样式
    getRowStyle({ row }) {
      if (row.isTotal) {
        return {
          background: '#F5F7FA',
          fontWeight: 'bold'
        };
      }
      return {};
    },

    // 处理扣分项说明
    handleDeductionExplanation() {
      const _this = this;
      if (!this.selectedProject || !this.selectedProject.id) {
        this.$message.warning('请先选择项目');
        return;
      }

      // 打开扣分说明弹框
      this.deductionExplanationVisible = true;

      // 调用扣分说明接口获取数据
      collectionApi.projectDeduction({
        id: this.selectedProject.id,
        project_id: this.projectId
      }).then((res) => {
        if (res && res.message) {
          _this.deductionList = res.message.list && res.message.list.list ? res.message.list.list : [];
          _this.deductionColumn = res.message.list && res.message.list.table ? res.message.list.table : [];
          _this.deductionTitle = res.message.windows_title || '扣分说明';
        } else {
          _this.deductionList = [];
          _this.deductionColumn = [];
          _this.deductionTitle = '扣分说明';
        }
      }).catch((error) => {
        console.error('获取扣分说明失败:', error);
        _this.$message.error('获取扣分说明失败，请稍后重试');
        _this.deductionList = [];
        _this.deductionColumn = [];
        _this.deductionTitle = '扣分说明';
      });
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (!bytes || bytes === 0) {
        return '-';
      }
      const k = 1024;
      const sizes = ['B', 'K', 'M', 'G'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toFixed(1) + sizes[i];
    },

    // 显示操作日志
    handleShowOperationLog() {
      const _this = this;
      if (!this.selectedProject || !this.selectedProject.id) {
        this.$message.warning('请先选择项目');
        return;
      }

      this.operationLogVisible = true;

      // 调用collectionApi.js接口获取项目操作日志
      collectionApi.projectLog({ id: this.selectedProject.id }).then((res) => {
        if (res && res.message) {
          _this.operationLogList = res.message.list || [];
          // _this.operationLogTitle = res.message.windows_title || '';
        }
      }).catch((error) => {
        console.error('获取操作日志失败:', error);
        _this.$message.error('获取操作日志失败，请稍后重试');
        _this.operationLogList = [];
        // _this.operationLogTitle = '';
      });
    },

    // 处理审核操作
    handleAudit(action) {
      const _this = this;
      if (!this.selectedProject || !this.selectedProject.id) {
        this.$message.warning('请先选择项目');
        return;
      }

      if (action === 'approve') {
        this.$confirm('确定要审核通过该项目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 使用collection.js接口审核通过
          collectionApi.auditSuccess({ id: this.selectedProject.id }).then((res) => {
            if (res) {
              _this.$message.success('审核通过成功');
              // 只刷新右侧详情数据，不刷新左侧列表
              if (_this.selectedProject && _this.selectedProject.id) {
                _this.handleSelectProject(_this.selectedProject);
              }
            } else {
              _this.$message.error(res.message || '审核通过失败');
            }
          }).catch((error) => {
            console.error('审核通过失败:', error);
            _this.$message.error('审核通过失败');
          });
        }).catch(() => { });
      } else {
        // 审核不通过需要输入失败原因
        this.$prompt('请输入审核不通过的原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea',
          inputPlaceholder: '请输入失败原因',
          inputValidator: (value) => {
            if (!value || value.trim() === '') {
              return '请输入失败原因';
            }
            return true;
          }
        }).then(({ value }) => {
          // 使用collection.js接口审核失败
          collectionApi.auditFail({
            id: this.selectedProject.id,
            remark: value.trim()
          }).then((res) => {
            if (res) {
              _this.$message.success('审核不通过成功');
              // 只刷新右侧详情数据，不刷新左侧列表
              if (_this.selectedProject && _this.selectedProject.id) {
                _this.handleSelectProject(_this.selectedProject);
              }
            } else {
              _this.$message.error(res.message || '审核不通过失败');
            }
          }).catch((error) => {
            console.error('审核不通过失败:', error);
            _this.$message.error('审核不通过失败');
          });
        }).catch(() => { });
      }
    }
  },
  created() {
    // 从路由获取项目ID
    this.projectId = this.$route.query.id || '';
  },
  mounted() {
    this.getFailedList();
    // 监听窗口大小变化，重新检查标题是否溢出
    window.addEventListener('resize', this.checkTitleOverflow);
  },
  beforeDestroy() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.checkTitleOverflow);
  },
  watch: {
    'failedQueryParams.page'() {
      this.updateCurrentIndex();
    },
    // 监听 selectedProject 变化，重新检查标题是否溢出
    selectedProject() {
      this.$nextTick(() => {
        this.checkTitleOverflow();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";

.tab_content {
  padding: 0;
  min-height: 300px;
  position: relative;
}

/* 内容包装器，左右分栏 */
.content_wrapper {
  display: flex;
  position: relative;
  width: 100%;
  gap: 24px;
  align-items: flex-start;
  /* 顶部对齐，不强制等高 */
}

/* 左侧列表区 */
.left_list_area {
  width: 330px;
  flex-shrink: 0;
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-self: flex-start;
  /* 不强制与右侧等高 */
}

/* 内容区域 */
.content_area {
  width: 396px;
  padding: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  /* 不强制与右侧等高 */
}

/* 右侧详情区 */
.right_detail_area {
  min-width: calc(100% - 354px);
  max-width: calc(100% - 354px);
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 7px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.detail_container {
  width: 100%;
  padding: 14px 20px;
  min-height: 600px;
  padding-bottom: 80px;
  /* 为固定底部区域留出空间 */
  flex: 1;
  overflow-y: auto;
}

/* 骨架屏样式 */
.skeleton_container {
  padding: 14px 20px;
}

.skeleton_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 63px;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 20px;
}

.skeleton_title {
  width: 300px;
  height: 24px;
}

.skeleton_tag {
  width: 80px;
  height: 24px;
  border-radius: 4px;
  margin-right: 10px;
}

.skeleton_button {
  width: 80px;
  height: 28px;
  border-radius: 4px;
}

.skeleton_section {
  margin-bottom: 30px;
}

.skeleton_section_title {
  width: 100px;
  height: 20px;
  margin-bottom: 14px;
}

.skeleton_card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  padding: 20px;
}

.skeleton_score {
  width: 200px;
  height: 28px;
  margin-bottom: 24px;
}

.skeleton_info_group {
  display: flex;
  gap: 16px;
}

.skeleton_info_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton_label {
  width: 60px;
  height: 16px;
}

.skeleton_value {
  width: 100%;
  height: 20px;
}

.skeleton_tabs {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0;
  border-bottom: 1px solid #E5E5E5;
  gap: 24px;
}

.skeleton_tab {
  width: 80px;
  height: 20px;
}

.skeleton_indicator_list {
  padding: 20px;
}

.skeleton_indicator_item {
  padding: 20px 0;
  border-bottom: 1px solid #F0F2F5;
}

.skeleton_indicator_item:last-child {
  border-bottom: none;
}

.skeleton_indicator_title {
  width: 60%;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton_indicator_content {
  width: 80%;
  height: 16px;
  margin-bottom: 8px;
}

.skeleton_indicator_content:last-child {
  width: 50%;
}

.skeleton_actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
}

.skeleton_action_btn {
  width: 120px;
  height: 40px;
}

/* 骨架屏动画 */
.skeleton_line,
.skeleton_tag,
.skeleton_button,
.skeleton_tab {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* 详情标题栏 */
.detail_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 63px;
  padding: 0 20px;
  border-bottom: 1px solid #E5E5E5;
}

.detail_title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #1D2129;
  width: calc(100% - 250px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation_log {
  font-size: 14px;
  color: #555555;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  margin-left: 10px;
}

/* 章节标题 */
.section_title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #1D2129;
  margin-bottom: 14px;
  margin-top: 0;
}

.section_title.first_section_title {
  margin-top: 0;
}

/* 总得分和评分行 */
.score_info_row {
  margin-bottom: 24px;
}

.score_info_item {
  display: flex;
}

.score_display_group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.info_label {
  min-width: 60px;
  margin-right: 6px;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 14px;
  color: #787A87;
  line-height: 22px;
}

.info_value {
  font-size: 14px;
  color: #1D2129;
  line-height: 1.5;
  word-break: break-word;
}

/* 组织信息列表：垂直排列 */
.org_info_list {
  display: flex;
  // flex-direction: column;
  gap: 16px;
}

.org_info_item {
  flex: 1;
  display: flex;
  // flex-direction: column;
}

.company_item {
  display: block;
  margin-bottom: 4px;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 14px;
  color: #1D2129;
  line-height: 22px;
}

.company_item:last-child {
  margin-bottom: 0;
}

.category_tag {
  display: inline-block;
  padding: 3px 10px;
  background: #F0F4FF;
  border-radius: 4px;
  font-size: 12px;
  color: #325FFF;
  line-height: 1.4;
  white-space: nowrap;
}

.status_tag {
  display: inline-block;
  padding: 3px 10px;
  background: #FFF7F0;
  border-radius: 4px;
  font-size: 12px;
  color: #F96E0A;
  line-height: 1.4;
  white-space: nowrap;
}

.total_score_text {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 20px;
  color: #1D2129;
  line-height: 22px;
}

.star_rating {
  display: flex;
  gap: 6px;
}

.star {
  font-size: 16px;
  color: #DCDFE6;
  line-height: 1;
  transition: color 0.3s;
}

.star.filled {
  color: #FF8B49;
}

/* 链接行 */
.info_links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 12px;
}

.link_text {
  font-size: 14px;
  color: $--color-primary;
  text-decoration: none;
  cursor: pointer;
}

/* 未选中提示 */
.no_selected_tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100px);
}

.tip_text {
  font-size: 14px;
  color: #909399;
}

/* 申请材料卡片 */
.application_materials_card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  margin-bottom: 20px;
}

/* 自定义标签页头部 */
.custom_tabs_header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0;
  border-bottom: 1px solid #E5E5E5;
  background: #FFFFFF;
}

.custom_tab_item {
  padding: 0 24px;
  height: 48px;
  line-height: 48px;
  color: #1D2129;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
  user-select: none;
}

.custom_tab_item:hover {
  color: #1890FF;
}

.custom_tab_item.active {
  color: #1890FF;
  font-weight: normal;
}

.tab_separator {
  color: #E5E5E5;
  font-size: 14px;
  line-height: 48px;
  user-select: none;
}

/* 指标内容 */
.indicators_content {
  min-height: 200px;
}

.indicator_item {
  padding: 20px 20px 30px;
  border-bottom: 1px solid #F0F2F5;
}

.indicator_item:last-child {
  border-bottom: none;
}

.indicator_title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.category_tag_title {
  display: inline-block;
  margin-right: 3px;
  padding: 0px 5px;
  border: 1px solid #AAAAAA;
  border-radius: 2px;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 13px;
  color: #555555;
  line-height: 22px;
  white-space: nowrap;
  flex-shrink: 0;
}

.title_text {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #1D2129;
  line-height: 22px;
  max-width: calc(100% - 114px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.score_text {
  margin-left: 7px;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 16px;
  color: #325FFF;
  line-height: 22px;
}

/* 选项样式 */
.indicator_options {
  display: flex;
  gap: 40px;
  margin-bottom: 12px;
}

.radio_option,
.checkbox_option {
  display: inline-flex;
  align-items: center;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #1D2129;
  line-height: 22px;
  margin-bottom: 0;
  position: relative;
}

/* 自定义方块 */
.radio_box,
.checkbox_box {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  display: block;
}

.option_text {
  color: #303133;
}

.radio_option.active .option_text {
  color: $--color-primary;
}

.checkbox_options {
  flex-wrap: wrap;
}

/* 上传区域 */
.upload_label {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #787A87;
  line-height: 22px;
  margin-bottom: 6px;
}

.uploaded_files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  max-width: 100%;
}

.file_item {
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: box-shadow 0.3s;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.file_item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.file_icon_wrapper {
  flex-shrink: 0;
  margin-right: 12px;
}

.file_icon_pdf {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(238, 90, 82, 0.3);
  position: relative;
}

.file_icon_pdf::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px;
  pointer-events: none;
}

.file_icon_word {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2B579A 0%, #1E3A5F 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(43, 87, 154, 0.3);
  position: relative;
}

.file_icon_word::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px;
  pointer-events: none;
}

.file_icon_excel {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1D6F42 0%, #107C41 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(29, 111, 66, 0.3);
  position: relative;
}

.file_icon_excel::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 4px;
  pointer-events: none;
}

.file_info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.file_name {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 14px;
  color: #1D2129;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
  width: 100%;
  min-width: 0;
}

.file_size {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 12px;
  color: #787A87;
  line-height: 16px;
}

.no_indicator_tip {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

/* 填空题答案样式 */
.indicator_answer_text {
  margin-top: 12px;
  padding: 12px;
  background: #F5F7FA;
  border-radius: 4px;
}

.fill_answer_item {
  margin-bottom: 8px;
  line-height: 1.8;
}

.fill_answer_item:last-child {
  margin-bottom: 0;
}

.answer_label {
  font-weight: 500;
  color: #606266;
  margin-right: 8px;
}

.answer_value {
  color: #303133;
  word-break: break-word;
}

/* 固定在底部的审核按钮区域 */
.fixed_audit_footer {
  position: fixed;
  bottom: 0;
  right: 20px;
  /* page_content 的 padding-right */
  left: 624px;
  /* 左侧导航栏(250px) + page_content padding-left(20px) + 左侧列表区(330px) + gap(24px) = 624px */
  background: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 16px 20px;
}

/* 审核操作按钮 */
.audit_actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
}

.audit_btn {
  min-width: 120px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}

/* 导航栏样式 */
.failed_nav_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 16px;
  flex-shrink: 0;
}

.nav_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

.nav_arrow img {
  width: 32px;
  height: 32px;
  display: block;
}

.nav_arrow:hover {
  opacity: 0.8;
}

.nav_arrow_disabled {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

.nav_arrow_disabled:hover {
  opacity: 0.3;
}

.nav_position {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #1D2129;
  line-height: 22px;
  font-style: normal;
  text-transform: none;
}

.nav_position_index {
  color: #325FFF;
}

/* 项目列表样式 */
.failed_project_list {
  flex: 1;
  padding: 0 20px 20px;
  /* 高度限制：视窗高度减去导航栏高度(56px)和页面顶部预留空间(约44px) */
  max-height: calc(100vh - 100px);
  min-height: calc(100vh - 100px);
  /* 确保 flex 子元素可以收缩 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 滚动条样式 */
.failed_project_list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.failed_project_list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.failed_project_list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.failed_project_list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 项目卡片样式 */
.failed_project_card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 13px 15px 11px;
  margin-bottom: 20px;
  cursor: pointer;
  border: 1px solid #E5E5E5;
}

/* 卡片上部分内容（左侧和右侧内容区） */
.card_top_content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.failed_project_card.active {
  border-color: #869CFA;
  background: #F0F3FF;
}

/* 左侧内容区样式 */
.card_left_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* 项目标题 */
.project_title {
  font-size: 16px;
  font-weight: 500;
  color: #1F2329;
  margin-bottom: 2px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 分类标签 */
.project_category {
  margin-bottom: 12px;
}

/* 底部信息（提交时间和总分） */
.project_bottom_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 提交时间 */
.project_submit_time {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 12px;
  color: #787A87;
  line-height: 16px;
  white-space: nowrap;
}

/* 右侧内容区样式 */
.card_right_content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  min-width: 60px;
  padding-left: 12px;
  text-align: right;
}

/* 状态 */
.project_status {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}

/* 总分 */
.project_total_score {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  font-size: 14px;
  color: #325FFF;
  line-height: 16px;
  white-space: nowrap;
}

/* 空数据样式 */
.no_data {
  text-align: center;
  padding: 80px 0;
  opacity: 0.6;
}

.no_data img {
  width: 120px;
  margin-bottom: 10px;
}

/* 操作日志 Dialog 样式 */
.operation_log_dialog {

  /* 调整遮罩层透明度和层级 */
  ::v-deep .v-modal {
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 2004 !important;
  }

  /* 确保弹框在遮罩层之上 */
  ::v-deep .el-dialog__wrapper {
    z-index: 2005 !important;
  }

  ::v-deep .el-dialog {
    z-index: 2005 !important;
    position: relative;
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  ::v-deep .el-dialog__title {
    font-size: 18px;
    font-weight: bold;
    color: #1F2329;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  ::v-deep .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #EBEEF5;
  }
}

.operation_log_content {
  min-height: 300px;
}

/* 表格样式优化 */
.operation_log_content ::v-deep .el-table {
  border: 1px solid #EBEEF5;
}

.operation_log_content ::v-deep .el-table th {
  background: #F5F7FA;
  color: #1F2329;
  font-weight: bold;
}

.operation_log_content ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #FAFAFA;
}

.operation_log_content ::v-deep .el-table td,
.operation_log_content ::v-deep .el-table th {
  padding: 12px 0;
  border-color: #EBEEF5;
}

/* 评委打分 Dialog 样式 */
.score_explanation_dialog {

  /* 调整遮罩层透明度和层级 */
  ::v-deep .v-modal {
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 2004 !important;
  }

  /* 确保弹框在遮罩层之上 */
  ::v-deep .el-dialog__wrapper {
    z-index: 2005 !important;
  }

  ::v-deep .el-dialog {
    z-index: 2005 !important;
    position: relative;
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  ::v-deep .el-dialog__title {
    font-size: 18px;
    font-weight: bold;
    color: #1F2329;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  ::v-deep .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #EBEEF5;
  }
}

.score_explanation_content {
  min-height: 400px;
}

/* 评分公式框 */
.score_formula_box {
  background: #E6F7FF;
  border: 1px solid $--color-primary;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.formula_text {
  font-size: 14px;
  color: #1F2329;
  line-height: 1.8;

  p {
    margin: 0;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 得分信息区 */
.score_info_section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.score_info_left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.score_item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score_label {
  font-size: 14px;
  color: #606266;
  min-width: 80px;
}

.score_value {
  font-size: 16px;
  font-weight: bold;
  color: #F6353E;
}

.star_rating_section {
  display: flex;
  align-items: center;
}

.star_rating {
  display: flex;
  gap: 4px;
}

.star {
  font-size: 20px;
  color: #DCDFE6;
  line-height: 1;
}

.star.filled {
  color: #FF8B49;
}

.score_info_right {
  display: flex;
  align-items: center;
}

.deduction_link {
  font-size: 14px;
  color: $--color-primary;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

/* 评委得分表格 */
.judge_scores_table {
  margin-top: 20px;
}

.judge_scores_table ::v-deep .el-table {
  border: 1px solid #EBEEF5;
}

.judge_scores_table ::v-deep .el-table th {
  background: #F5F7FA;
  color: #1F2329;
  font-weight: bold;
}

.judge_scores_table ::v-deep .el-table td,
.judge_scores_table ::v-deep .el-table th {
  padding: 12px 0;
  border-color: #EBEEF5;
}

/* 隐藏嵌套列的子表头 */
.judge_scores_table ::v-deep .el-table thead tr:nth-child(2) {
  display: none;
}

.total_score_in_table {
  color: #F6353E;
  font-weight: bold;
}

/* 扣分项说明 Dialog 样式 */
.deduction_explanation_dialog {

  /* 调整遮罩层透明度和层级 */
  ::v-deep .v-modal {
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 2004 !important;
  }

  /* 确保弹框在遮罩层之上 */
  ::v-deep .el-dialog__wrapper {
    z-index: 2005 !important;
  }

  ::v-deep .el-dialog {
    z-index: 2005 !important;
    position: relative;
  }

  ::v-deep .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  ::v-deep .el-dialog__title {
    font-size: 18px;
    font-weight: bold;
    color: #1F2329;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  ::v-deep .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #EBEEF5;
  }
}

.deduction_explanation_content {
  min-height: 300px;
}

/* 自定义扣分表格样式 */
.deduction_custom_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #EBEEF5;
  font-size: 14px;
}

.deduction_custom_table thead {
  background: #409EFF;
}

.deduction_custom_table th {
  padding: 12px 15px;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px solid #EBEEF5;
  background: #409EFF;
}

.deduction_custom_table tbody tr {
  transition: background-color 0.3s;
}

.deduction_custom_table tbody tr:hover {
  background-color: #F5F7FA !important;
}

.deduction_custom_table td {
  padding: 12px 15px;
  text-align: center;
  border: 1px solid #EBEEF5;
  color: #1F2329;
}

.deduction_custom_table tbody td:first-child {
  text-align: left;
}

/* 扣分表格样式（保留，可能其他地方还在使用 el-table） */
.deduction_explanation_content ::v-deep .el-table {
  border: 1px solid #EBEEF5;
}

.deduction_explanation_content ::v-deep .el-table th {
  background: #409EFF;
  color: #FFFFFF;
  font-weight: bold;
}

.deduction_explanation_content ::v-deep .el-table td,
.deduction_explanation_content ::v-deep .el-table th {
  padding: 12px 0;
  border-color: #EBEEF5;
}
</style>
